<template>
    <view class="container">

        <view class="searchBar">
            <u-navbar title-color="#fff" back-icon-color="#ffffff" :is-back="true" :background="background"
                :back-text-style="{color: '#fff'}" title="">
                <view class="musicSearch">
                    <u-search placeholder="请输入关键词" v-model="keyword" action-text="取消" :animation="true" bg-color="rgba(73, 215, 177, 0.9)"
                        color="#fff" placeholder-color="#fff" :action-style="{color:'#fff'}" @search="songSearch"></u-search>
                </view>
            </u-navbar>
        </view>
        <view class="musicList" v-for="item in musicList" :key="item.mid" @click="playMusic(item)">
            <view class="musicPic">
                <u-image width="100rpx" height="100rpx" :src="item.pic" border-radius="20rpx"></u-image>
            </view>
            <view class="musicName">
                {{item.name}}
            </view>
            <view class="musicSinger">
                {{item.singer}}
            </view>
            <view class="musicLength">
                {{item.length}}
            </view>
            <view class="musicPlay">
                <u-icon name="error" color="#909399" size="40"></u-icon>
            </view>
        </view>
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                audioPlay: false,
                background: {
                    'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(28, 205 ,158))'
                },
                keyword: '',
                musicList: '',
                songInfo: ''
            }
        },
        onLoad() {
            // this.$u.get('https://api.bbbug.com/api/song/playurl?mid=148330690', {}, {
            // }).then(res => {
            //     console.log(res);
            // });
        },
        methods: {
            async songSearch() {
                this.musicList = ''
                const res = await this.$u.api.songSearch({
                    "keyword": this.keyword
                })
                if (res.code !== 200) {
                    console.log(res.msg)
                }
                this.musicList = res.data
                console.log(this.musicList)
            },
            playMusic(item) {
                console.log(item)
                const bgAudioMannager = uni.getBackgroundAudioManager();
                console.log('Play Music');
                bgAudioMannager.title = "正在播放 " + item.name;
                bgAudioMannager.singer = item.singer
                bgAudioMannager.coverImgUrl = item.pic;
                bgAudioMannager.src = "https://api.bbbug.com/api/song/playurl?mid=" + item.mid;
                bgAudioMannager.play();
            },
            // getMid(item) {
            //     this.songInfo = item
            //     this.audioPlay = true
            //     this.audioPlay = true
            //     console.log(item)
            // }
        }
    }
</script>

<style>
    page {
        background-color: #f4f4f5;
    }

    .container {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .searchBar {
        position: relative;
    }

    .musicSearch {
        width: 95%;
        left: 15%;
    }

    .musicList {
        position: relative;
        width: 100%;
        height: 120rpx;
        background-color: #fff;
        margin-top: 10rpx;
    }

    .musicPic {
        position: absolute;
        top: 10%;
        left: 5%;
        margin: 0 auto;
    }

    .musicName {
        position: absolute;
        top: 20%;
        left: 22%;
    }

    .musicSinger {
        position: absolute;
        top: 50%;
        left: 22%;
        font-size: 25rpx;
        color: #909399;
    }

    .musicLength {
        position: absolute;
        top: 20%;
        right: 22%;
        font-size: 25rpx;
        color: #909399;
    }

    .musicPlay {
        position: absolute;
        top: 35%;
        right: 10%;
        color: #909399;
    }
</style>
